<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试插件加载问题</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .code {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 3px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-all;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .debug-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .debug-btn:hover {
            background: #0056b3;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <h1>🔧 Vhall Stream Saver - 插件调试工具</h1>

    <div class="test-section info">
        <h2>📋 调试目标</h2>
        <p><strong>问题：</strong> 插件显示"一直在加载"且标题为"Unknown Video"</p>
        <p><strong>目标：</strong> 模拟API响应，测试插件的数据处理和显示逻辑</p>
        <p><strong>测试URL：</strong> <a href="https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" target="_blank">https://bbs.huaweicloud.com/live/cloud_live/202509051500.html</a></p>
    </div>

    <div class="test-section">
        <h2>🎯 模拟API响应</h2>
        <p>下面的数据结构基于用户提供的实际API响应：</p>
        <div class="code" id="apiResponse">{
  "code": 200,
  "msg": "success",
  "data": {
    "token": "E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA",
    "expired_datetime": "2025-10-26T12:00:00Z",
    "hls_domainnames": {
      "720p": [
        {
          "line": "线路1（腾讯云）",
          "cdn_name": "tx",
          "hls_domainname": "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8"
        },
        {
          "line": "线路2（阿里云）",
          "cdn_name": "ali",
          "hls_domainname": "https://tehlsvodhls01.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8"
        }
      ],
      "1080p": [
        {
          "line": "线路1（腾讯云）",
          "cdn_name": "tx",
          "hls_domainname": "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record_1080p.m3u8"
        }
      ],
      "480p": [
        {
          "line": "线路1（腾讯云）",
          "cdn_name": "tx",
          "hls_domainname": "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record_480p.m3u8"
        }
      ]
    }
  }
}</div>

        <button class="debug-btn" onclick="testPluginAPI()">📡 测试插件API处理</button>
        <button class="debug-btn" onclick="testChromeStorage()">💾 测试Chrome存储</button>
        <button class="debug-btn" onclick="checkBackgroundScript()">🔍 检查后台脚本</button>
        <button class="debug-btn" onclick="clearPluginData()">🗑️ 清除插件数据</button>

        <div id="debugStatus"></div>
    </div>

    <div class="test-section">
        <h2>📊 调试步骤</h2>
        <ol>
            <li><strong>安装插件：</strong> 在Chrome中加载 build 目录</li>
            <li><strong>打开开发者工具：</strong> F12，查看Console和Network标签</li>
            <li><strong>访问目标页面：</strong> <a href="https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" target="_blank">华为云直播页面</a></li>
            <li><strong>检查网络请求：</strong> 确认API调用是否被拦截</li>
            <li><strong>检查Console日志：</strong> 查看插件的详细日志输出</li>
            <li><strong>测试插件UI：</strong> 点击插件图标，检查是否显示"Unknown Video"和加载状态</li>
            <li><strong>使用调试工具：</strong> 点击上面的按钮进行详细调试</li>
        </ol>
    </div>

    <div class="test-section">
        <h2>🐛 常见问题排查</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div>
                <h4>问题1：插件无法检测到流</h4>
                <ul>
                    <li>检查网络权限</li>
                    <li>确认API URL匹配</li>
                    <li>查看后台脚本错误</li>
                </ul>
            </div>
            <div>
                <h4>问题2：显示"Unknown Video"</h4>
                <ul>
                    <li>检查tabs权限</li>
                    <li>确认标题提取逻辑</li>
                    <li>查看页面URL匹配</li>
                </ul>
            </div>
            <div>
                <h4>问题3：一直加载状态</h4>
                <ul>
                    <li>检查存储权限</li>
                    <li>确认数据结构正确</li>
                    <li>查看渲染错误</li>
                </ul>
            </div>
            <div>
                <h4>问题4：按钮无法点击</h4>
                <ul>
                    <li>检查加载状态管理</li>
                    <li>确认事件绑定</li>
                    <li>查看CSS冲突</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        let debugStatus = document.getElementById('debugStatus');

        function showStatus(message, type = 'info') {
            const status = document.createElement('div');
            status.className = `status ${type}`;
            status.innerHTML = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
            debugStatus.appendChild(status);
            debugStatus.scrollTop = debugStatus.scrollHeight;
        }

        function testPluginAPI() {
            showStatus('开始测试插件API处理...', 'info');

            // 模拟API调用
            const mockResponse = JSON.parse(document.getElementById('apiResponse').textContent);
            console.log('Mock API Response:', mockResponse);

            // 检查Chrome扩展消息传递
            if (typeof chrome !== 'undefined' && chrome.runtime) {
                showStatus('Chrome API可用，测试消息传递...', 'info');

                // 尝试发送测试消息到后台脚本
                chrome.runtime.sendMessage({
                    type: 'TEST_API_PROCESSING',
                    data: mockResponse.data
                }, function(response) {
                    if (chrome.runtime.lastError) {
                        showStatus(`消息传递错误: ${chrome.runtime.lastError.message}`, 'error');
                    } else {
                        showStatus('后台脚本响应: ' + JSON.stringify(response), 'success');
                    }
                });
            } else {
                showStatus('Chrome API不可用，请在扩展页面中测试', 'error');
            }
        }

        function testChromeStorage() {
            showStatus('测试Chrome存储...', 'info');

            if (typeof chrome !== 'undefined' && chrome.storage) {
                chrome.storage.session.get(['detectedStreams'], function(result) {
                    if (chrome.runtime.lastError) {
                        showStatus(`存储读取错误: ${chrome.runtime.lastError.message}`, 'error');
                    } else {
                        const streams = result.detectedStreams || [];
                        showStatus(`当前存储的流数量: ${streams.length}`, 'success');

                        if (streams.length > 0) {
                            console.log('Stored streams:', streams);
                            showStatus('详细流数据已输出到Console', 'info');
                        }
                    }
                });
            } else {
                showStatus('Chrome存储API不可用', 'error');
            }
        }

        function checkBackgroundScript() {
            showStatus('检查后台脚本状态...', 'info');

            if (typeof chrome !== 'undefined' && chrome.runtime) {
                chrome.runtime.sendMessage({
                    type: 'GET_DETECTED_STREAMS'
                }, function(response) {
                    if (chrome.runtime.lastError) {
                        showStatus(`后台脚本通信失败: ${chrome.runtime.lastError.message}`, 'error');
                        showStatus('可能的原因：1. 后台脚本未加载 2. 权限不足 3. 扩展ID不匹配', 'error');
                    } else {
                        showStatus('后台脚本通信正常', 'success');
                        showStatus(`返回的流数量: ${response.data ? response.data.length : 0}`, 'info');

                        if (response.data && response.data.length > 0) {
                            response.data.forEach((stream, index) => {
                                showStatus(`流${index + 1}: 标题="${stream.video_title}", 质量=${Object.keys(stream.hls_domainnames || {}).join(', ')}`, 'info');
                            });
                        }
                    }
                });
            } else {
                showStatus('Chrome运行时API不可用', 'error');
            }
        }

        function clearPluginData() {
            showStatus('清除插件数据...', 'info');

            if (typeof chrome !== 'undefined' && chrome.storage) {
                chrome.storage.session.remove(['detectedStreams'], function() {
                    if (chrome.runtime.lastError) {
                        showStatus(`清除数据失败: ${chrome.runtime.lastError.message}`, 'error');
                    } else {
                        showStatus('插件数据已清除', 'success');

                        // 通知后台脚本清除缓存
                        chrome.runtime.sendMessage({
                            type: 'CLEAR_DETECTED_STREAMS'
                        }, function(response) {
                            if (chrome.runtime.lastError) {
                                showStatus(`通知后台脚本清除失败: ${chrome.runtime.lastError.message}`, 'error');
                            } else {
                                showStatus('后台脚本数据已清除', 'success');
                            }
                        });
                    }
                });
            } else {
                showStatus('Chrome存储API不可用', 'error');
            }
        }

        // 页面加载时自动检查
        window.addEventListener('load', function() {
            showStatus('调试工具已加载，可以开始测试', 'success');
            showStatus('请先打开Chrome开发者工具查看详细日志', 'info');
        });

        // 监听来自后台脚本的消息
        if (typeof chrome !== 'undefined' && chrome.runtime) {
            chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
                showStatus(`收到消息: ${JSON.stringify(message)}`, 'info');
            });
        }
    </script>
</body>
</html>